<template>
	<view class="base-page">
		<!-- 问题列表 -->
		<view class="yangsf-padding-20">
			<view v-if="showDetail">
				<!-- 问题详情 -->
				<view class="card_white yangsf-padding-30">
					<view class="detail-title">{{currentFAQ.question}}</view>
					<u-line margin="20rpx 0"></u-line>
					<view class="detail-content" v-html="currentFAQ.answer"></view>
				</view>
				<!-- 将返回列表按钮移到页面底部固定位置 -->
				<view class="yangsf-page-bottom-button yangsf-padding-20">
					<u-button size="medium" type="primary" @click="backToList">返回列表</u-button>
				</view>
			</view>
			<view v-else>
				<!-- 问题列表 -->
				<view class="card_white yangsf-padding-20">
					<view class="faq-item" v-for="(item, index) in faqList" :key="index" @click="showFAQDetail(item)">
						<view
							class="yangsf-flex yangsf-flex-justify-content-space-between yangsf-flex-align-items-center">
							<text>{{item.question}}</text>
							<u-icon name="arrow-right" color="#8F8C8C" size="14"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 常见问题数据
				faqList: [{
						question: "电子合同为何具有法律效力？",
						answer: "<p>根据《中华人民共和国电子签名法》，可靠的电子签名与手写签名或者盖章具有同等的法律效力。</p><p>我们的电子合同系统符合电子签名法的相关规定，确保合同的法律效力。</p>"
					},
					{
						question: "实名认证不成功怎么办？",
						answer: "<p>您在实名认证时可能遇到如下情况，请重新做人脸识别:</p><p>1)未检测到人脸，请您按照规范重新录制</p><p>2)第三方底图不存在</p><p>3)身份证二要素与公安照片比对未通过</p><p>如果您多次尝试均未成功，请与客服取得联系，如果系统识别出人脸不符合要求将停止该账户签署合同功能。</p>"
					},
					{
						question: "如果忘记交易密码怎么办？",
						answer: "<p>如果您忘记账号使用的交易密码，可联系客户找回。</p>"
					}
				],
				showDetail: false,
				currentFAQ: {}
			}
		},
		onLoad() {
			// 检查是否有从首页传递过来的问题数据
			const faqData = uni.getStorageSync('currentFAQ');
			if (faqData) {
				try {
					this.currentFAQ = JSON.parse(faqData);
					this.showDetail = true;
					// 清除存储的数据，避免下次进入页面时仍显示同一问题
					uni.removeStorageSync('currentFAQ');
				} catch (e) {
					console.error('解析问题数据失败', e);
				}
			}
		},
		methods: {
			// 返回上一页
			// goBack() {
			// 	if (this.showDetail) {
			// 		this.backToList();
			// 	} else {
			// 		uni.navigateBack();
			// 	}
			// },
			// 显示问题详情
			showFAQDetail(faq) {
				this.currentFAQ = faq;
				this.showDetail = true;
			},
			// 返回问题列表
			backToList() {
				this.showDetail = false;
			}
		}
	}
</script>

<style scoped>
	.page-header {
		background-color: #ffffff;
		padding-top: 40rpx;
		padding-bottom: 20rpx;
	}

	.page-title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.faq-item {
		padding: 30rpx 10rpx;
		border-bottom: 1px solid #EEEEEE;
		font-size: 28rpx;
		color: #303133;
	}

	.faq-item:last-child {
		border-bottom: none;
	}

	.detail-title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
	}

	.detail-content {
		font-size: 28rpx;
		color: #606266;
		line-height: 1.6;
		margin-top: 20rpx;
		padding-bottom: 100rpx; /* 添加底部内边距，为固定按钮留出空间 */
	}
	
	.detail-content p {
		margin-bottom: 16rpx;
	}
</style>